<template>
  <div class="login" @keyup.enter="handleSubmit">
    <div class="form">
      <div class="title">系统登录</div>
      <a-form ref="form" layout="horizontal" :model="formData" :rules="rules">
        <a-form-item>
          <a-select v-model:value="formData.type" :options="accountTypes" />
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="formData.account" placeholder="账号" />
        </a-form-item>
        <a-form-item>
          <a-input-password v-model:value="formData.password" :visibility-toggle="true" placeholder="密码" />
        </a-form-item>
        <a-form-item style="text-align: left">
          <a-row>
            <a-col :span="12" style="text-align: left">
              <a-checkbox v-model:checked="formData.remember">记住密码</a-checkbox>
            </a-col>
            <a-col :span="12" style="text-align: right">
              <span class="forget" @click="$router.push({ name: 'recover' })">忘记密码？</span>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item>
          <a-button
            class="submit-button"
            size="large"
            type="primary"
            :loading="loading"
            :disabled="!formData.account.trim() || !formData.password.trim()"
            @click="handleSubmit"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { getRememberedInfo, clearLoginInfo, login } from './utils.js';

export default {
  name: 'Login',
  props: {
    homeOptions: { type: Object, default: undefined },
    checkPwd: { type: Boolean, default: undefined },
    checkPwdWrongTime: { type: Boolean, default: undefined },
  },
  data() {
    return {
      rules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'change' }],
      },
      formData: {
        type: '1',
        account: '',
        password: '',
        remember: false,
      },
      accountTypes: [
        { label: '管理员', value: '1' },
        { label: '从业人员', value: '2' },
      ],
      loading: false,
    };
  },
  created() {
    this.formData = this.getLocalInfo();
    clearLoginInfo();
  },
  methods: {
    onChange(e) {
      this.formData.remember = e.target.checked;
    },
    getLocalInfo() {
      let info = Object.assign({}, getRememberedInfo());
      return {
        type: info.type || '1',
        account: info.account || '',
        password: info.password || '',
        remember: info.remember === true,
      };
    },
    async handleSubmit() {
      const valid = await this.$refs.form.validate();
      if (!valid) return;
      this.loading = true;
      await login({
        type: this.formData.type,
        account: this.formData.account,
        password: this.formData.password,
        remember: this.formData.remember,
        checkPwdStrong: { enable: this.checkPwd !== false },
        checkPwdWrongTime: { enable: this.checkPwdWrongTime !== false },
        onResetPwd: () => {
          this.formData = this.getLocalInfo();
        },
        onSuccess: () => {
          const opt = Object.assign({ name: 'root' }, this.homeOptions);
          this.$router.replace(opt);
        },
        onFail: () => {
          this.loading = false;
        },
      });
    },
  },
};
</script>

<style lang="less">
@import 'login';
</style>
